<template>
  <div class="person">
    姓名: {{ person.name }}
    年龄: {{ person.age }}
    <hr>
    汽车: {{ person.cars.car1 }}、 {{ person.cars.car2 }}
    <hr>
    <button @click="changeAge">改变年龄</button>
    <button @click="changeCar1">改变第一辆车</button>
    <button @click="changeCar2">改变第一辆车</button>
    <button @click="changeCars">改变两辆车</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue';

let person = reactive({
  name: '小灿同学',
  age: 25,
  cars: {
    car1: "奥迪",
    car2: "宝马"
  }
})

function changeAge() {
  person.age += 1
}
function changeCar1() {
  person.cars.car1 = "特斯拉"
}
function changeCar2() {
  person.cars.car2 = "su7"
}
function changeCars() {
  person.cars = {
    car1: "特斯拉",
    car2: "su7"
  }
}

/**
 * 情况五：监视上述的多个数据
 */
watch([() => person.age, () => person.cars.car1], (newVal, oldVal) => {
  console.log('age变化了,');
  console.log('age变化了,新的值是:', newVal);
  console.log('旧的值是:', oldVal);
})

</script>

<style scoped>
.person {
  background: darksalmon;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>